这一期我们不光把近期学生的面试题拿来，甚至连答案也摆在大家眼前。

还等什么？收藏加关注走起。

1.模块化开发怎么做？(模块化开发使代码耦合度降低)

理解模块化开发模式：浏览器端requirejs,seajs;服务器端nodejs;

ES6模块化：fis、webpack等前端整体模块化

解决方案：grunt、gulp等前端工作流的使用

（1）服务器端：CommonJS -- nodejs

（2）浏览器端：AMD(推崇依赖前置) 异步的，如requirejs

（3）浏览器端：CMD(推崇依赖就近) 异步的，如seajs

（4）UMD：通用模块规范 是AMD和CommonJS两者的结合

前端模块化的优缺点：

（1）更好的分离

（2）一个文件一个模块，维护更加方便。

（3）按需加载

（4）避免命名冲突

（5）更好的依赖处理

2.谈谈你对 WebPack 的看法，常用哪些？

Webpack是前端自动化打包工具，webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用Plugin来扩展webpack功能。

Webpack的优点：

（1）专注于处理模块化的项目，能做到开箱即用，一步到位。

（2）可通过plugin扩展，完整好用又不失灵活

（3）使用场景不局限于web开发

（4）社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展

（5）良好的开发体验

WebPack的缺点：只能用于采用模块化开发的项目

3.平时如何管理你的项目？

（1）先期确定好全局样式，编码模式

（2）编写习惯必须一致

（3）标注样式编写人，各模板都及时标注

（4）页面进行标注

（5）css跟HTML分文件夹并行存放，命名都得统一

（6）JS分文件夹存放，命名以该JS功能为准的英文翻译

（7）图片采用整合的images.png png8格式，文件使用尽量整合在一起使用，方便将来管理。

4.VUE项目发布的时候生产路径怎么切换为线上路径？

在config里面配置一下就好，打包的时候就变成线上路径了

5.margin穿透怎么解决？

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。

（2）为父盒子添加overflow：hidden；

（3）为父盒子设定padding值；

（4）为父盒子添加position：fixed；

（5）为父盒子添加 display：table；

（6）利用伪元素给子元素的前面添加一个空元素

6.简要说明calc、Support、Media各自的含义及用法？

calc（）：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算。

support：用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。

@media：针对不同的媒体类型定义不同的样式

7.1rem、1em、1vh、1px各自代表的含义？

1rem:相对于根元素字体大小

1em:值不固定，是相对单位，其相对应父级元素的字体大小会调整

1vh:相对于屏幕宽度和高度的1%。

1px:值固定，容易计算 相对长度单位 像素px是相对于显示器屏幕分辨率而言的

8.什么是BFC？怎么创建一个BFC？

BFC就是‘块级格式化上下文’的意思，创建了BFC的元素就是一个独立的盒子，不过只有 Block-level box可以参与创建BFC，它规定了内部的Block-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

9.link与@improt的区别？

link属于html标签，而@import是css提供的，

@import有执行效率问题，它会打破浏览器并行加载资源，导致加载页面速度变慢，尽量不要使用@import。

10.let、const、var有什么区别？

var:根据函数划分作用域 重复定义 变量提升 定义的全局变量会成为window的属性

let: 定义的是变量

const:定义的是常量 定义时必须赋值 一经定义就不能修改 避免全局变量污染

let/const:代码块划分作用域 不能重复定义 不能变量提升 先定义后使用

暂时性死区：在一个作用域中let/const定义的变量只能定义一个 不会成为window的属性

11.GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制

在以下情况中，请使用POST请求：

（1）无法使用缓存文件（更新服务器上的文件或数据库）

（2）向服务器发送大量数据（POST没有数据量限制）

（3）发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

12.请说下移动端常见的适配不同屏幕大小的方法

（1）响应式布局：就是页面元素的位置随着屏幕尺寸的变换而变化，通常使用百分比来定位，而在设计上要预留一些可被‘压缩’的空间。

（2）Rem缩放：通过rem为单位来进行视觉开发，然后通过计算后改变html的font-size来对页面进行缩放。

（3）媒体查询Media Queries：它主要是通过查询设备的宽高来执行不同的css代码，最终达到界面的配置。Media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。

　
（4）Flex弹性布局：它的viewport是固定的：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">

（5）使用flexbox解决方案

（6）Css通过sass预编译，设置量取的px值转化rem的变量$px:(1/100)+rem;

cover布局：就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。

（7）Contain布局：同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。




本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：李游Leo老师前端讲堂！